<template>
	<div id="payment">
		<div id="payment-header">
			<i class="el-icon-notebook-1" style="color: blue;font-size: 20px;margin-right: 5px;"></i>
			<p>请付款:</p>
			<div style="min-width: 70px;text-align: end;font-weight: 800;color: red;">{{ data.order.amount }}￥</div>
		</div>
		<br>
		<div style="display: flex;justify-content: center;">
			<el-form :model="data.order" status-icon class="demo-ruleForm" label-width="100px">
				<el-form-item label="订单号">
					<el-input v-model="data.order.ordid" disabled></el-input>
				</el-form-item>
				<el-form-item label="订单总额">
					<el-input v-model="data.order.amount" disabled></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="data.order.ship2name" disabled></el-input>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="data.order.ship2phone" disabled></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="data.order.ship2addr" disabled></el-input>
				</el-form-item>
				<el-form-item label="付款状态">
					<span v-if="data.order.payStatus === 1" style="color: red;font-size: 18px;font-weight: 700;">已付款</span>
					<el-button v-if="data.order.payStatus !== 1" type="danger" size="medium"
                     @click="pay">未付款，点击这里去付款</el-button>
<!--          @click="()=>{data.gifMoney = true}">未付款，点击这里去付款</el-button>-->
				</el-form-item>
			</el-form>
		</div>
		<hr>
		<div style="height: 30px;line-height: 30px;">
			订单详情
		</div>
		<el-table :data="data.order.orderItems" border highlight-current-row fit show-overflow-tooltip style="width: 100%;">
			
			<el-table-column label="商品图">
				<template v-slot:default="scope">
					<img :src="pic(scope.row.book.pic)" alt="scope.row.book.name" style="width: 100%;">
				</template>
			</el-table-column>
			<el-table-column prop="book.name" label="商品名称" min-width="150px">
			</el-table-column>
			<el-table-column prop="price" label="单价/元（人民币）" min-width="58px"></el-table-column>
			<el-table-column prop="num" label="商品数量"></el-table-column>
			<el-table-column label="总价格/元（人民币）">
				<template v-slot:default="scope">
					{{ price(scope.row) }}
				</template>
			</el-table-column>
			<el-table-column label="剩余库存">
				<template v-slot:default="scope">
					<span style="color: red;font-weight: 800;">{{ scope.row.book.stock }}</span>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 弹出框模拟支付 -->
		<el-dialog :title="`支付金额：${data.order.amount}元`" v-model="data.gifMoney" width="500px" center >
			<el-image :src="picMoney()" fit="fill" :lazy="true" style="width: 300px;"></el-image>
			<span slot="footer" id="dialog-footer">
				<el-button @click="data.gifMoney = false">取 消 支 付</el-button>
				<el-button type="danger" @click="ok()">确 认 支 付</el-button>
			</span>
		</el-dialog>

	</div>

</template>

<script setup>
	import {
		onMounted,
		reactive
	} from 'vue';
	import api from '@/api';
	import pic from '@/api/pic';
	import money from "@/assets/money.jpg";
	import {
		ElMessage, ElMessageBox
	} from 'element-plus';
import { useRoute } from 'vue-router';
  import router from "@/router";

	const data = reactive({
		order: {},
		item: [],
		gifMoney: false
	})
	
	const route = useRoute()
	
	const pay = () =>{
		router.push({
      path: "/alipay",
      query: {
        id: data.order.ordid,
        amount: data.order.amount
      }
    })
	}

	const picMoney = () => {
		return money;
	}

	const price = (row) => {
		return row.price * row.num
	}
	const ok = () => {
		data.gifMoney = false;
ElMessageBox.alert('已经支付成功，等待店家发货....', '支付提醒', {
			    confirmButtonText: '确定',
			    type: 'warning', // 可选类型：'success' | 'info' | 'warning' | 'error' | 'question'
			  });
		api.get(`/api/order/addPay/${data.order.ordid}`).then((resp) => {
			data.order = resp.data.data
			
		})
	}
	onMounted(() => {
		let id = route.query.id;
		api.get(`/api/order/findByOrdId/${id}`).then((resp) => {
			data.order = resp.data.data
			
		})
	})
</script>

<style lang="less">
	#payment {
		height: 87vh;
		padding-top: 10px;
		padding-left: 12%;
		padding-right: 12%;

		#payment-header {
			height: 30px;
			border-bottom: 2px solid #b3d8ff;
			display: flex;
			justify-content: center;
			font-size: 16px;
		}

		.demo-ruleForm {
			width: 80%;
		}

		.el-color-picker__icon,
		.el-input,
		.el-textarea {
			width: 80%;
		}

		
		.el-dialog__body {
		    display: flex;
		    justify-content: center;
		    flex-direction: column;
		    align-items: center;
		}
		
		#dialog-footer { 
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
	}
</style>